<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>点单界面</title>
<link rel="stylesheet" type="text/css" href="../css/reset.css" />
<link rel="stylesheet" type="text/css" href="../css/order.css" />
<link rel="stylesheet" type="text/css" href="../css/cupertino/jquery-ui-1.8.6.custom.css" />
<script type="text/javascript" src="../js/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../js/jquery/jquery-ui-1.8.5.custom.min.js"></script>
<script type="text/javascript" src="../js/jquery/jquery.bgiframe-2.1.1.js"></script>
<script type="text/javascript">
var OPTION_LIMIT = 1;
$(function() {
	
	var slider_ul = $(".bussOrderList").innerWidth(
		$("li.scroll-content-item", slider_ul).size() * 
		($("li.scroll-content-item:first", slider_ul).outerWidth() + 20));
	
	// 参团人员及点菜的通用空模板
	var TPL = "<li>" + $("ul.userOrderList li:first").html() + "</li>";
	
	var userlist = $(".rightSider .list_block");
	var u_li = $("li", userlist).click(function(e) {
		var _me = $(this);
		var curLi = $("ul.userOrderList li:has('div.li_userArea span.init')");
		var status = curLi.find("div.li_userArea span.status");
		if(status.hasClass("init")) {
			status.removeClass("init");
		}else{
			return false;
		}
		
		var curCont = $("div.li_userArea", curLi);
		_me.removeClass("addBg");
		
		var curPosition = _me.offset();
		curPosition.left += _me.scrollLeft();
		curPosition.top += _me.scrollTop();
		
		var targetPostion = curCont.offset();
		targetPostion.left += curCont.scrollLeft();
		targetPostion.top += curCont.scrollTop();
		
		
		var button = curLi.find("div.li_orderArea button.statusBtn");
		var clone = _me.clone();
		if(_me.attr("rel")) {
			_me.after(clone);
			_me.unbind().remove();
			clone.css("position", "fixed").animate(targetPostion, 500, function() {
				clone.removeAttr("style");
				clone.appendTo(curCont);
				
				status.hide();
				if($("ul.userOrderList li:has('div.li_userArea span.init')").size() == 0) {
					curLi.after(TPL);
				}
				bindBtnClick(button);
			});
		}else {
			clone.appendTo(_me.parent()).css("position", "fixed").offset(curPosition);
			clone.unbind();
			clone.animate(targetPostion, 500, function() {
				clone.removeAttr("style");
				clone.appendTo(curCont);
				
				status.hide();
				
				if($("ul.userOrderList li:has('div.li_userArea span.init')").size() == 0) {
					curLi.after(TPL);
				}
				bindBtnClick(button);
			});
		}
		//$("ul.userOrderList li div.li_orderArea").removeClass("editing");
		button.show();
	});
	
	u_li.hover(function() {
		$(this).addClass("addBg");
	}, function() {
		$(this).removeClass("addBg");
	});
	
	var isIE = $.browser.msie || false;
	if(isIE) {
		var cont = $("div.sliderContainer");
		var menus = $("div.shopMenuSub", cont);
		menus.width(cont.width() * 0.96);
	}
	
	// 点菜程序~ 暂不兼容IE6噢。。。
	var menu_ul = $("ul.menuListSet");
	var menu_li = $("li", menu_ul).click(function() {
		var _me = $(this);
		var allLi = $("ul.userOrderList li>div>.li_orderArea.editing");
		if(allLi.size() > 0) {
			var curCont = allLi.eq(0);
		}else {
			var allLi = $("ul.userOrderList li>div>div.li_orderArea").not(":has('dl')");
			if(allLi.size() > 0) {
				var curCont = allLi.eq(0);
			}else{
				errMsg("你需要先选择参团人员");
				return false;
			}
		}
		var content = _me.children().clone();
		
		var curPosition = _me.offset();
		curPosition.left += _me.scrollLeft();
		curPosition.top += _me.scrollTop();
		
		var targetPostion = curCont.offset();
		targetPostion.left += curCont.scrollLeft();
		targetPostion.top += curCont.scrollTop();
		
		content.appendTo(_me.parent()).css("position", "fixed").offset(curPosition);
		content.animate(targetPostion, 500, function() {
			content.removeAttr("style");
			content.appendTo(curCont);
		});
	});
	
	// 商家的checkbox选择事件
	$(".bussOrderList>li input:checkbox").click(function() {
		var _me = $(this);
		var flag = _me.attr("checked"); // 已是选中状态
		$(".bussOrderList>li input:checked").attr("checked", false);
		if(flag) {
			_me.attr("checked", true);
		}
		if(OPTION_LIMIT < 2) {
			$(".bussOrderList>li").removeClass("selected");
		}
		if(_me.attr("checked") == true) {
			_me.parents("li").addClass("selected");
		}else {
			_me.parents("li").removeClass("selected");
		}
	});
	
});

function bindBtnClick(button) {
	$(button).click(function(e) {
		var ul = $("ul.userOrderList");
		var buttons = ul.find("div.li_orderArea button.statusBtn");
		var spans = ul.find("div.li_orderArea span.status");
		var me = $(this);
		if(me.hasClass("finish")) {
			me.text("继续添加");
			me.addClass("adding");
			me.removeClass("finish").addClass("adding");
			me.parent().find("span.status").text("");
			me.parents(".li_orderArea.editing").removeClass("editing");
			return false;
		}
		if(me.hasClass("adding")) {
			buttons.not(me).text("继续添加");
			spans.not(".init").text("");
			$(".li_orderArea.editing", ul).removeClass("editing");
			
			me.text("完成");
			me.addClass("finish").removeClass("adding");
			me.parent().find("span.status").removeClass("init").text("添加中。。。");
			me.parents(".li_orderArea").addClass("editing");
			return false;
		}
		return false;
	});
}

function errMsg(str) {
	alert(str);
}

</script>
<script type="text/javascript" src="../js/order.js"></script>
<script type="text/javascript" src="../js/slider.js"></script>
</head>
<body>
<div id="MainArea">
  <div class="formArea">
    <form id="OrderFrm" action="#" method="post">
      <div class="formItems">
        <label>参团人员</label>
        <span class="tips">提示：单击右侧<a href="#">用户列表>></a>可将用户加入到本团</span>
        <ul class="userOrderList">
          <li>
            <div class="innerBlock">
              <div class="li_userArea">
              	<span class="status init">未选择</span>
              </div>
              <div class="li_orderArea">
              	<div class="statusLine"><span class="status init">未选择</span>
                <button class="statusBtn adding">编辑消费</button>
                </div>
              </div>
              <div class="clear"></div>
            </div>
          </li>
          <div class="clear"></div>
        </ul>
      </div>
      <div class="formItems box">
        <label>商家信息</label>
        <span class="tips">提示：单击菜谱中的菜名可将加入到参团用户的菜单中</span>
        <div class="sliderContainer">
          <div class="scroll-pane sliderGallery">
            <div class="scroll-bar-wrap ui-widget-content ui-corner-top">
              <div class="scroll-bar"></div>
            </div>
            <ul class="bussOrderList scroll-content">
              <li class="scroll-content-item">
                <div class="innerBlock">
                  <label class="shop_wrap_label" for="shop_001">
                    <input type="checkbox" name="shop" id="shop_001" />
                    <img class="shop_avatar" src="../img/shop_avatar.jpg"  /><br />
                    <span class="shop_name">疯狂烤翅</span> </label>
                </div>
                <div class="shopMenuSub">
                  <h3>菜谱</h3>
                  <ul class="menuListSet">
                    <li>
                      <dl>
                        <dt>香嫩牛肉套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span></dd>
                      </dl>
                    </li>
                    <li>
                      <dl>
                        <dt>香嫩牛肉套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span></dd>
                      </dl>
                    </li>
                    <li>
                      <dl>
                        <dt>香嫩牛肉套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span></dd>
                      </dl>
                    </li>
                    <li>
                      <dl>
                        <dt>香嫩牛肉套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span> </dd>
                      </dl>
                    </li>
                    <li>
                      <dl>
                        <dt>香嫩牛肉套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span></dd>
                      </dl>
                    </li>
                    <li>
                      <dl>
                        <dt>香嫩牛肉套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span></dd>
                      </dl>
                    </li>
                    <li>
                      <dl>
                        <dt>香嫩牛肉套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span></dd>
                      </dl>
                    </li>
                    <li>
                      <dl>
                        <dt>香嫩牛肉套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span></dd>
                      </dl>
                    </li>
                  </ul>
                </div>
              </li>
              <li class="scroll-content-item">
                <div class="innerBlock">
                  <label class="shop_wrap_label" for="shop_002">
                    <input type="checkbox" name="shop" id="shop_002" />
                    <img class="shop_avatar" src="../img/shop_avatar.jpg"  /><br />
                    <span class="shop_name">疯狂烤翅</span> </label>
                </div>
                <div class="shopMenuSub">
                  <h3>菜谱</h3>
                  <ul class="menuListSet">
                    <li>
                      <dl>
                        <dt>香菇腐竹套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span></dd>
                      </dl>
                    </li>
                    <li>
                      <dl>
                        <dt>香菇腐竹套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span></dd>
                      </dl>
                    </li>
                    <li>
                      <dl>
                        <dt>香菇腐竹套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span></dd>
                      </dl>
                    </li>
                    <li>
                      <dl>
                        <dt>香菇腐竹套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span> </dd>
                      </dl>
                    </li>
                    <li>
                      <dl>
                        <dt>香菇腐竹套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span></dd>
                      </dl>
                    </li>
                    <li>
                      <dl>
                        <dt>香菇腐竹套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span></dd>
                      </dl>
                    </li>
                    <li>
                      <dl>
                        <dt>香菇腐竹套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span></dd>
                      </dl>
                    </li>
                    <li>
                      <dl>
                        <dt>香菇腐竹套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span></dd>
                      </dl>
                    </li>
                  </ul>
                </div>
              </li>
              <li class="scroll-content-item">
                <div class="innerBlock">
                  <label class="shop_wrap_label" for="shop_003">
                    <input type="checkbox" name="shop" id="shop_003" />
                    <img class="shop_avatar" src="../img/shop_avatar.jpg"  /><br />
                    <span class="shop_name">疯狂烤翅</span> </label>
                </div>
                <div class="shopMenuSub">
                  <h3>菜谱</h3>
                  <ul class="menuListSet">
                    <li>
                      <dl>
                        <dt>香菇腐竹套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span></dd>
                      </dl>
                    </li>
                    <li>
                      <dl>
                        <dt>香菇腐竹套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span></dd>
                      </dl>
                    </li>
                    <li>
                      <dl>
                        <dt>香菇腐竹套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span></dd>
                      </dl>
                    </li>
                    <li>
                      <dl>
                        <dt>香菇腐竹套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span> </dd>
                      </dl>
                    </li>
                    <li>
                      <dl>
                        <dt>香菇腐竹套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span></dd>
                      </dl>
                    </li>
                    <li>
                      <dl>
                        <dt>香菇腐竹套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span></dd>
                      </dl>
                    </li>
                    <li>
                      <dl>
                        <dt>香菇腐竹套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span></dd>
                      </dl>
                    </li>
                    <li>
                      <dl>
                        <dt>香菇腐竹套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span></dd>
                      </dl>
                    </li>
                  </ul>
                </div>
              </li>
              <li class="scroll-content-item">
                <div class="innerBlock">
                  <label class="shop_wrap_label" for="shop_004">
                    <input type="checkbox" name="shop" id="shop_004" />
                    <img class="shop_avatar" src="../img/shop_avatar.jpg"  /><br />
                    <span class="shop_name">疯狂烤翅</span> </label>
                </div>
                <div class="shopMenuSub">
                  <h3>菜谱</h3>
                  <ul class="menuListSet">
                    <li>
                      <dl>
                        <dt>香菇腐竹套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span></dd>
                      </dl>
                    </li>
                    <li>
                      <dl>
                        <dt>香菇腐竹套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span></dd>
                      </dl>
                    </li>
                    <li>
                      <dl>
                        <dt>香菇腐竹套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span></dd>
                      </dl>
                    </li>
                    <li>
                      <dl>
                        <dt>香菇腐竹套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span> </dd>
                      </dl>
                    </li>
                    <li>
                      <dl>
                        <dt>香菇腐竹套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span></dd>
                      </dl>
                    </li>
                    <li>
                      <dl>
                        <dt>香菇腐竹套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span></dd>
                      </dl>
                    </li>
                    <li>
                      <dl>
                        <dt>香菇腐竹套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span></dd>
                      </dl>
                    </li>
                    <li>
                      <dl>
                        <dt>香菇腐竹套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span></dd>
                      </dl>
                    </li>
                  </ul>
                </div>
              </li>
              <li class="scroll-content-item">
                <div class="innerBlock">
                  <label class="shop_wrap_label" for="shop_005">
                    <input type="checkbox" name="shop" id="shop_005" />
                    <img class="shop_avatar" src="../img/shop_avatar.jpg"  /><br />
                    <span class="shop_name">疯狂烤翅</span> </label>
                </div>
                <div class="shopMenuSub">
                  <h3>菜谱</h3>
                  <ul class="menuListSet">
                    <li>
                      <dl>
                        <dt>香菇腐竹套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span></dd>
                      </dl>
                    </li>
                    <li>
                      <dl>
                        <dt>香菇腐竹套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span></dd>
                      </dl>
                    </li>
                    <li>
                      <dl>
                        <dt>香菇腐竹套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span></dd>
                      </dl>
                    </li>
                    <li>
                      <dl>
                        <dt>香菇腐竹套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span> </dd>
                      </dl>
                    </li>
                    <li>
                      <dl>
                        <dt>香菇腐竹套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span></dd>
                      </dl>
                    </li>
                    <li>
                      <dl>
                        <dt>香菇腐竹套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span></dd>
                      </dl>
                    </li>
                    <li>
                      <dl>
                        <dt>香菇腐竹套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span></dd>
                      </dl>
                    </li>
                    <li>
                      <dl>
                        <dt>香菇腐竹套餐</dt>
                        <dd><span class="currency">&yen;</span><span class="price">16.00</span></dd>
                      </dl>
                    </li>
                  </ul>
                </div>
              </li>
              <li class="scroll-content-item">
                <div class="innerBlock">
                  <label class="shop_wrap_label" for="shop_006">
                    <input type="checkbox" name="shop" id="shop_006" />
                    <img class="shop_avatar" src="../img/shop_avatar.jpg"  /><br />
                    <span class="shop_name">疯狂烤翅</span> </label>
                </div>
                <div class="shopMenuSub">
                  <h3>菜谱</h3>
                  <ul>暂时还没有菜谱，选择下方的</ul>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!--slider end-->
      </div>
      <p class="formItems">
        <label class="formTitles" for="total">付账方式</label>
        <label for="optionForGoDutch">
          <input type="radio" class="" id="optionForGoDutch" name="type" value="go_dutch" />
          AA制</label>
        <label for="optionForAvg">
          <input type="radio" class="" id="optionForAvg" name="type" value="average" />
          Average</label>
      </p>
      <p class="formItems">
        <label class="formTitles" for="total">结帐金额</label>
        <span class="attach">&yen;</span>
        <input class="txt order_txt small" id="total" />
      </p>
      <p class="formItems">
        <label class="formTitles" for="title">备注</label>
        <input type="text" id="title" class="txt order_txt medium" />
      </p>
    </form>
  </div>
  <div class="rightSider">
    <h3 class="title">已注册用户</h3>
    <div class="searchLine">
      <input id="userSearchInput" class="txt" />
      <a id="userSearchBtn" class="searchIcon" href="#"><span>搜索</span></a> </div>
    <ul class="list_block">
      <li rel="1023123"> <span class="avatar"> <img src="../img/avatar.jpg" /> </span> <span class="username">Wendy</span> </li>
      <li rel="1023123"> <span class="avatar"> <img src="../img/avatar.jpg" /> </span> <span class="username">Wendy</span> </li>
      <li rel="1023123"> <span class="avatar"> <img src="../img/avatar.jpg" /> </span> <span class="username">Wendy</span> </li>
      <li rel="1023123"> <span class="avatar"> <img src="../img/avatar.jpg" /> </span> <span class="username">Wendy</span> </li>
      <li rel="1023123"> <span class="avatar"> <img src="../img/avatar.jpg" /> </span> <span class="username">Wendy</span> </li>
      <li rel="1023123"> <span class="avatar"> <img src="../img/avatar.jpg" /> </span> <span class="username">Wendy</span> </li>
      <li rel="1023123"> <span class="avatar"> <img src="../img/avatar.jpg" /> </span> <span class="username">Wendy</span> </li>
      <li rel="1023123"> <span class="avatar"> <img src="../img/avatar.jpg" /> </span> <span class="username">Wendy</span> </li>
    </ul>
    <h3 class="title">未注册用户</h3>
    <ul class="list_block">
      <li> <span class="avatar"> <img src="../img/avatar.jpg" /> </span> <span class="username">亲朋好友</span> </li>
      <li> <span class="avatar"> <img src="../img/avatar.jpg" /> </span> <span class="username">新用户</span> </li>
    </ul>
  </div>
  <div class="bottomSider"> </div>
</div>
</body>
</html>
